<template>
  <div class="table-container">
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;overflow:auto;height:530px"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="预估单价">
              <span>{{ props.row.predictPrice }}</span>
            </el-form-item>
            <el-form-item label="预估数量">
              <span>{{ props.row.predictNum }}</span>
            </el-form-item>
            <el-form-item label="预估总价">
              <span>{{ props.row.predictTotal }}</span>
            </el-form-item>
            <el-form-item label="实际单价">
              <span>{{ props.row.realPrice }}</span>
            </el-form-item>
            <el-form-item label="实际数量">
              <span>{{ props.row.realNum }}</span>
            </el-form-item>
            <el-form-item label="实际总价">
              <span>{{ props.row.realTotal }}</span>
            </el-form-item>
          </el-form>
          <!-- <div v-for="(item,index) in props.row.serviceList" :key="index"><span>{{ item.serviceId }}</span></div> -->
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="采购单编号"
        prop="id"
      />
      <el-table-column
        label="材料编号"
        prop="materialId"
      /> -->
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center"
      />
      <el-table-column
        label="材料名称"
        prop="materialName"
        align="center"
      />
      <el-table-column
        label="状态"
        prop="status"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            :type="statusHandler(scope.$index,scope.row)"
            disable-transitions
          >{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="采购时间"
        prop="purchaseDate"
        align="center"
      />
      <el-table-column
        label="操作人"
        prop="operator"
        align="center"
      />
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status!=='已完成'"
            size="medium"
            icon="el-icon-edit-outline"
            title="编辑"
            round
            @click="editHandler(scope.$index, scope.row)"
          />
          <el-button
            v-if="scope.row.status==='待分发'"
            size="medium"
            type="danger"
            icon="el-icon-delete"
            title="删除"
            round
            @click="delHandler(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <keep-alive>
      <PurchaseDialog
        :id="chooseData.id"
        :dialog-visible="dialogFormVisible"
        :dialog-title="dialogTitle"
        @closeDialog="closeHandler"
        @editDialog="editHandler"
        @getTable="getTable"
      />
    </keep-alive>
  </div>
</template>

<script>
import { getPurchaseList, delPurchase } from '@/api/purchase'
import { parseTime } from '@/utils/index'
// import { getServiceInfo } from '@/api/beautyService'
import { getMaterialInfo } from '@/api/materialInventory'
import { Message, MessageBox } from 'element-ui'
import PurchaseDialog from './purchaseDialog'
export default {
  name: 'PurchaseTable',
  components: { PurchaseDialog },
  props: {
    status: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      tableData: null,
      loading: false,
      dialogFormVisible: false,
      dialogTitle: '编辑采购单',
      chooseData: {
        id: ''
      }
    }
  },
  created() {
    this.getTable()
  },
  methods: {
    getTable() {
      const query = {}
      if (this.status !== '全部') query.status = this.status
      if (this.$store.getters.name !== 'admin') query.operator = this.$store.getters.name
      if (this.$store.getters.name === 'admin' && this.status === '待处理') query.status = '送审'
      if (this.status === '送审中') query.status = '送审'
      if (this.$store.getters.name !== 'admin' && this.status === '待处理') query.status = '已分发'
      this.loading = true
      getPurchaseList(query).then(res => {
        if (res) {
          const purchaseList = res.data.list
          purchaseList.forEach(element => {
            element.purchaseDate = parseTime(element.purchaseDate, '{y}-{m}-{d}')
            if (element.materialId) {
              this.getMaterialInfo(element.materialId).then(res => {
                element.materialName = res
              })
              if (this.$store.getters.roles.indexOf('buyer') !== -1 && element.status === '已分发') {
                element.status = '待处理'
              }
              if (this.$store.getters.name === 'admin' && element.status === '送审') {
                element.status = '待处理'
              }
            }
          })
          this.tableData = purchaseList
          this.$nextTick(() => {
            document.getElementsByClassName('el-table__expand-icon')[0].click()
          })
          setTimeout(() => {
            this.loading = false
          }, 1 * 1000)
        }
        this.loading = false
      })
    },
    async getMaterialInfo(id) {
      const res = await getMaterialInfo(id)
      return res.data.data.name + '：' + res.data.data.introduction
    },
    statusHandler(index, row) {
      if (row.status === '已分发') {
        return 'success'
      } else if (row.status === '待分发' || row.status === '待处理') {
        return 'warning'
      } else if (row.status === '已完成') {
        return 'info'
      } else {
        return 'primary'
      }
    },
    delHandler(index, row) {
      MessageBox.confirm('将删除该采购单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPurchase(row.id).then(response => {
          Message({
            message: response.data.message,
            type: 'success',
            duration: 5 * 1000
          })
        })
        this.getTable()
      })
    },
    editHandler(index, row) {
      this.chooseData.id = row.id
      this.dialogFormVisible = true
    },
    closeHandler() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss">
.el-table::before{
  height: 0;
}
  .demo-table-expand {
    font-size: 0;
    padding: 0px 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
